<template>
    <div class="shichangjiandu">
        <!-- 渠道汇总 -->
        <div class="summary channel-summary">
            <div class="title flex">
                <div class="title-icon">
                    <img src="@/assets/images/shichangjiandu/data-icon.png">
                    <span>案件分布</span> 
                </div>
                <div class="title-bg">
                    <img src="@/assets/images/shichangjiandu/data-bg.png">
                </div>
            </div>
            <div class="summary-content">
                <div
                    class="channelChat"
                    id="channelChat"
                    ref="channelChat"
                    style="height: 190px"
                    ></div>
            </div>
        </div>
    </div>
</template>

<script>
import { MarketSurveillanceDB } from '@/api'

export default {
  data() {
    return {
      proportionData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      MarketSurveillanceDB.getCommunityOrderNum({
        orgId:'1301571732182839297'
      }).then(res => {
        this.proportionData = res.data
          .map(v => {
            return {
              value: v.num,
              name: v.name,
              // proportion: v.proportion
            }
          })
          .slice(0, 5)
        this.initChart()
      })
    },
    initChart() {
      let myChart = echarts.init(this.$refs.channelChat)
      let self = this
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        legend: {
          icon: 'circle',
          orient: 'vertical',
          top: 'center',
          width: 20,
          right: '15%',
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
          formatter: function (name) {
            if (name) {
              const param = self.proportionData.find(v => v.name === name)
              return name + '  ' + param.value + ' 件'
            }
            return
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(31, 73, 135, 0.7)',
          formatter: params => {
            let str = `${params.name}: ${params.value}件`
            return str
          }
        },
        series: [
          // {
          //   //实线外环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['30%', '50%'],
          //   center: ['35%', '50%'],
          //   data: [100],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   type: 'pie',
          //   name: '最里面背景圆',
          //   radius: ['8%', '0%'],
          //   center: ['35%', '50%'],
          //   z: 0,
          //   data: [
          //     {
          //       value: 100,
          //       itemStyle: {
          //         color: '#fff'
          //       },
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       },
          //       hoverAnimation: false
          //     }
          //   ],
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   //虚线内环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['40%', '60%'],
          //   center: ['35%', '50%'],
          //   data: [100],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          // {
          //   //虚线内环
          //   type: 'pie',
          //   hoverAnimation: false,
          //   radius: ['50%', '70%'],
          //   center: ['35%', '50%'],
          //   data: [
          //     {
          //       value: 1,
          //       name: '虚线内环',
          //       proportion: '111'
          //     }
          //   ],
          //   itemStyle: {
          //     color: 'transparent',
          //     borderColor: 'rgb(17,60,112)',
          //     borderWidth: 1,
          //     borderType: 'solid'
          //   },
          //   label: {
          //     show: false
          //   },
          //   tooltip: {
          //     show: false
          //   }
          // },
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            radius: [30, 60],
            center: ['30%', '50%'],
            color: [
              'rgba(36, 220, 247, 1)',
              'rgba(0, 164, 250, 1)',
              'rgba(250, 124, 0, 1)',
              'rgba(255, 192, 0, 1)',
              'rgba(189, 0, 0, 1)',
            ],
            label: {
              normal: {
                show: false,
                position: 'inside',
                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontSize: 16,
                  fontWeight: '100'
                }
              }
            },
            labelLine: {
              normal: {
                smooth: true,
                length: 10,
                lineStyle: {
                  width: 1.5
                }
              }
            },
            // itemStyle: {
            //   borderColor: '#0a1a2a',
            //   borderWidth: '5'
            // },
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            data: this.proportionData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.shichangjiandu {
    .summary {
        .title {
            border-bottom: 1px solid rgba(255,255,255,0.4);
            position: relative;
            height: 42px;
             ::after{
                content: '';
                height: 1px;
                width: 7px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: #fff;
            }
            .title-icon {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 18px;
                font-weight: bold;
                color: #FFFFFF;
                img {
                    width: 42px;
                    height: 42px;
                }
                span {
                    display: inline-block;
                    height: 42px;
                    line-height: 42px;
                }
            }
            .title-bg {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                img{
                    width: 227px;
                    height: 10px;
                }
             
            }
            >div{
                width: 50%;
            }

        }

        .summary-content {
            width: 100%;
            height: 210px;
            .channelChat {
                padding-top: 20px;
            }
            
        }
    }
}
</style>